<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">

</head>

<body>
  <!-- 快捷导航 -->
  <div class="shortcut">
    <div class="wrapper">
      <ul>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">免费注册 </a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span class=".iconfont icon-mobile-phone"></span>手机版</a></li>
      </ul>
    </div>
  </div>
  <!-- 头部导航 -->
  <div class="header wrapper">
    <!-- logo -->
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">餐厨</a></li>
        <li><a href="#">电器</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#">洗护</a></li>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <span class="iconfont icon-search"></span>
      <input type="text" placeholder="搜一搜">

    </div>
    <!-- 购物车 -->
    <div class="cart">
      <span class="iconfont icon-cart-full"></span>
      <i>2</i>
    </div>

  </div>
  <!-- banner -->
  <div class="banner">
    <div class="wrapper">
      <!-- pic -->
      <ul class="pic">
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
        <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
      </ul>
      <!-- 侧导航ul -->
      <div class="subnav">
        <ul>
          <li>
            <div>
              <a href="#" class="classify">生鲜</a>
              <a href="#">水果</a>
              <a href="#">蔬菜</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">美食</a>
              <a href="#">面点</a>
              <a href="#">干果</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">餐厨</a>
              <a href="#">数码产品</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">电器</a>
              <a href="#">床品</a>
              <a href="#">四件套</a>
              <a href="#">被枕</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">居家</a>
              <a href="#">奶粉</a>
              <a href="#">玩具</a>
              <a href="#">辅食</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">洗护</a>
              <a href="#">洗发</a>
              <a href="#">洗护</a>
              <a href="#">美妆</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">孕婴</a>
              <a href="#">奶粉</a>
              <a href="#">玩具</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">服饰</a>
              <a href="#">女装</a>
              <a href="#">男装</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">杂货</a>
              <a href="#">户外</a>
              <a href="#">图书</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
          <li>
            <div>
              <a href="#" class="classify">品牌</a>
              <a href="#">品牌制造</a>
            </div>
            <span class="iconfont icon-arrow-right-bold"></span>
          </li>
        </ul>
      </div>
      <!-- 小圆点 -->
      <ol>
        <li class="current"><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ol>
    </div>
  </div>
  <div class="good wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h5>新鲜好物</h5>
        <h4>新鲜出炉 品质靠谱</h4>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部
          <span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <ul>
        <!-- <li>
          <a href="#">
            <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
            <div class="txt">
              <h3>KN95级莫兰迪色防护口罩</h3>
              <p>¥<span>79</span></p>
            </div>
          </a>
        </li>
        <li><a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p>¥<span></span></p>
            </div>
          </a></li>
        <li><a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p>¥<span></span></p>
            </div>
          </a></li>
        <li><a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p>¥<span></span></p>
            </div>
          </a></li> -->
      </ul>
    </div>
  </div>
  <!-- 人气推荐 -->
  <div class="recommond wrapper">
    <div class="title">
      <div class="left">
        <h5>人气推荐</h5>
        <h4>人气爆款 不容错过</h4>
      </div>
    </div>
    <div class="content">
      <ul>
        <!-- <li>
          <a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p></p>
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="pic"><img src="" alt=""></div>
            <div class="txt">
              <h3></h3>
              <p></p>
            </div>
          </a>
        </li> -->
      </ul>
    </div>

  </div>
  <!-- 热门品牌 -->
  <div class="brand">
    <div class="wrapper">
      <div class="title">
        <div class="left">
          <h5>热门品牌</h5>
          <h4>国际经典 品质认证</h4>
        </div>
        <div class="right">
          <a href="#" class="prev">&lt</a>
          <a href="#" class="next">&gt</a>
        </div>
      </div>
      <div class="txt">
        <ul>
          <li><a href="#"><img src="./uploads/hot1.png"></a></li>
          <li><a href="#"><img src="./uploads/hot2.png"></a></li>
          <li><a href="#"><img src="./uploads/hot3.png"></a></li>
          <li><a href="#"><img src="./uploads/hot4.png"></a></li>
          <li><a href="#"><img src="./uploads/hot5.png"></a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 生鲜 -->
  <div class="fresh wrapper">
    <div class="title">
      <div class="left">
        <h5>生鲜</h5>
      </div>

      <div class="right">
        <ul>
          <li><a href="#" class="active">热门</a></li>
          <li><a href="#">蔬菜</a></li>
          <li><a href="#">肉禽蛋</a></li>
          <li><a href="#">水果</a></li>
          <li><a href="#">海鲜</a></li>
          <li><a href="#">零食</a></li>
          <li><a href="#">饮料</a></li>
        </ul>
        <a href="#" class="more">查看全部
          <span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <div class="fr">
      <div class="left"><a href="#"><img src="./uploads/fresh_left.png" alt=""></a></div>
      <div class="right">
        <ul>
          <li>
            <a href="#"><img src="./uploads/fresh1.png" alt=""></a>
            <p>双味千层，手抓饼烤肉组合
              <br>240g/袋 4片装<br>
              加热即食
            </p>
            <div class="price">¥ <span>89.99</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh2.png" alt=""></a>
            <p>云南甘蔗慢熬红糖馒头
              <br>220g/袋 5个装<br>
              加热即食
            </p>
            <div class="price">¥ <span>9.00</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh3.png" alt=""></a>
            <p>日式风味小圆饼<br>
              圆形【海盐味】<br>
              糖果零食
            </p>
            <div class="price">¥ <span>588</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh4.png" alt=""></a>
            <p>全麦奶油浓香小面包<br>
              50g*12袋<br>
              美味西点<br>
            </p>
            <div class="price">¥ <span>69.00</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh5.png" alt=""></a>
            <p>秘制外皮五福摩提大福点心<br>
              150g/盒<br>
              美味西点<br>
            </p>
            <div class="price">¥ <span>39.99</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh6.png" alt=""></a>
            <p>水果面膜韩国蜂蜜柚子茶<br>
              560g/瓶<br>
              冲调饮品<br>
            </p>
            <div class="price">¥ <span>40.00</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh7.png" alt=""></a>
            <p>浓情比利时巧克力礼盒装<br>
              205克/盒<br>
              糖果零食<br>
            </p>
            <div class="price">¥ <span>120.00</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh8.png" alt=""></a>
            <p>抹茶奶油小蛋糕礼盒装<br>
              220克/盒<br>
              美味西点<br>
            </p>
            <div class="price">¥ <span>60.00</span></div>
            <div class="cover">
              <p>找相似</p>
              <p></p>
              <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 最新专题 -->
  <div class="topic wrapper">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <h5>最新专题</h5>
      </div>
      <div class="right">
        <a href="#" class="more">查看全部
          <span class="iconfont icon-arrow-right-bold"></span></a>
      </div>
    </div>
    <!-- 内容 -->
    <div class="topic-bd">
      <ul>
        <li>
          <div class="pic">
            <img src="./uploads/topic1.png">
            <!-- 定位区域 -->
            <div class="cover">
              <div class="left">
                <h4>吃这些美食才不算辜负自己</h4>
                <p>餐厨起居洗护好物</p>
              </div>
              <div class="right">￥
                <span>29.9</span><span>起</span>
              </div>
            </div>
          </div>
          <div class="txt">
            <div class="left">
              <p>
                <i class="iconfont icon-favorites-fill"></i>
                <span>1220</span>
              </p>
              <p>
                <i class="iconfont icon-browse"></i>
                <span>1800</span>
              </p>
            </div>
            <div class="right">
              <p>
                <i class="iconfont icon-comment"></i>
                <span>245</span>
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./uploads/topic2.png">
            <!-- 定位区域 -->
            <div class="cover">
              <div class="left">
                <h4>吃这些美食才不算辜负自己</h4>
                <p>餐厨起居洗护好物</p>
              </div>
              <div class="right">￥
                <span>29.9</span><span>起</span>
              </div>
            </div>
          </div>
          <div class="txt">
            <div class="left">
              <p>
                <i class="iconfont icon-favorites-fill"></i>
                <span>1220</span>
              </p>
              <p>
                <i class="iconfont icon-browse"></i>
                <span>1800</span>
              </p>
            </div>
            <div class="right">
              <p>
                <i class="iconfont icon-comment"></i>
                <span>245</span>
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="pic">
            <img src="./uploads/topic3.png">
            <!-- 定位区域 -->
            <div class="cover">
              <div class="left">
                <h4>吃这些美食才不算辜负自己</h4>
                <p>餐厨起居洗护好物</p>
              </div>
              <div class="right">￥
                <span>29.9</span><span>起</span>
              </div>
            </div>
          </div>
          <div class="txt">
            <div class="left">
              <p>
                <i class="iconfont icon-favorites-fill"></i>
                <span>1220</span>
              </p>
              <p>
                <i class="iconfont icon-browse"></i>
                <span>1800</span>
              </p>
            </div>
            <div class="right">
              <p>
                <i class="iconfont icon-comment"></i>
                <span>245</span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- 底部导航 -->
  <div class="footers">
    <div class="wrapper">
      <div class="service">
        <ul>
          <li>
            <h5></h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5></h5>
            <p>物流快捷</p>
          </li>
          <li>
            <h5></h5>
            <p>品质新鲜</p>
          </li>
          <li>
            <h5></h5>
            <p>售后无忧</p>
          </li>
        </ul>
      </div>
      <div class="help">
        <div class="left">
          <dl>
            <dt>购物指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>配送方式</dt>
            <dd><a href="#">配送运费</a></dd>
            <dd><a href="#">配送范围</a></dd>
            <dd><a href="#">配送时间</a></dd>
          </dl>
          <dl>
            <dt>关于我们</dt>
            <dd><a href="#">平台规则</a></dd>
            <dd><a href="#">联系我们</a></dd>
            <dd><a href="#">问题反馈</a></dd>
          </dl>
          <dl>
            <dt>售后服务</dt>
            <dd><a href="#">售后政策</a></dd>
            <dd><a href="#">退款说明</a></dd>
            <dd><a href="#">取消订单</a></dd>
          </dl>
          <dl>
            <dt>服务热线</dt>
            <dd><a href="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
            <dd><a href="#">客服电话400-0000-000</a> </dd>
            <dd><a href="#">工作时间周一至周日 8:00-18:00</a> </dd>
          </dl>
        </div>
        <div class="right">
          <ul>
            <li>
              <img src="./images/wechat.png" alt="">
              <p>微信公众号</p>
            </li>
            <li>
              <img src="./images/wechat.png" alt="">
              <p>APP下载二维码</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="copyright">
        <ul>
          <li><a href="#"> 关于我们</a></li>
          <li><a href="#"> 帮助中心</a></li>
          <li><a href="#"> 售后服务 </a></li>
          <li><a href="#"> 配送与验收</a></li>
          <li><a href="#"> 商务合作</a></li>
          <li><a href="#"> 搜索推荐</a></li>
          <li><a href="#"> 友情链接</a></li>
        </ul>
        <p>CopyRight © 小兔鲜</p>
      </div>
    </div>
  </div>

  <!-- 电梯 -->
  <div class="xtx-elevator">
    <ul class="xtx-elevator-list">
      <li><a href="javascript:;" data-name="new">新鲜好物</a></li>
      <li><a href="javascript:;" data-name="popular">人气推荐</a></li>
      <li><a href="javascript:;" data-name="brand">热门品牌</a></li>
      <li><a href="javascript:;" data-name="topic">最新专题</a></li>
      <li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
    </ul>
  </div>
  <script>
    const elevator = document.querySelector('.xtx-elevator')
    const banner = document.querySelector('.banner')
    window.addEventListener('scroll', function () {
      // console.log(document.documentElement.scrollTop);
      console.log(banner.offsetTop);
      elevator.style.opacity = document.documentElement.scrollTop >= banner.offsetTop ? 1 : 0
    })
    //点击顶部按钮返回
    const backTop = document.querySelector('#backTop')
    backTop.addEventListener('click', function () {
      document.documentElement.scrollTop = 0
    })

  </script>


  <script src="./js/index.js"></script>
</body>

</html>